<template>
  <!-- 巡查管理 -->
  <div class="wrapper">
    <!-- @exportXls="exportXls" @handleEnSure="handleEnSure" @handleAdd="handleAdd" -->
    <SearchForm :area="'list'" :query="queryParamBasic" @onSearch="initData" />
    <a-card :body-style="{ padding: 0 }" :bordered="false">
      <a-spin :indicator="indicator" :spinning="spinning" tip="获取数据中...">
        <div class="spin-content">
          <a-table size="small" bordered :rowKey="record => record.id" :columns="columnsData" :dataSource="data"
            :pagination="pagination" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :rowClassName="setRowClassName">
            <span slot="type" slot-scope="text, record">
              <a-badge v-if="record.handlingTime != null && record.handlingTime != ''" :color="'green'" :text="'已处置'" />
              <a-badge v-else :color="'red'" :text="'未处置'" />
            </span>
            <span slot="action" slot-scope="text, record">
              <template>
                <a size="small" type="link" @click="handleView(record)">详情</a>
                <a-divider type="vertical" />
                <a size="small" type="link" @click="exportXls(record)">导出</a>
              </template>
            </span>
          </a-table>
        </div>
      </a-spin>
    </a-card>

    <a-modal style="top: 10px;" :bodyStyle="{ padding: '0', 'max-height': '80vh', 'overflow-y': 'auto' }" :title="'详情'"
      :width="1200" :maskClosable="false" :visible="visible" :okText="'导出'" @cancel="visible = false" @ok="exportXls(queryParam)">
      <div style="font-size: 24px;text-align: center; font-weight: bold;">
        <h1>锡山区小型零星工程安全生产管理工作统计表({{ thisYear }}.{{ thisMonth }})</h1>
      </div>
      <a-form>
        <a-row :gutter="24">
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item v-bind="formItemLayout" label="填报单位">
              <a-input v-model="queryParam.fillInUnit" allowClear />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item v-bind="formItemLayout" label="填报人">
              <a-input v-model="queryParam.fillInUnitPerson" allowClear />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item v-bind="formItemLayout" label="联系电话">
              <a-input v-model="queryParam.fillInUnitPhone" allowClear />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item v-bind="formItemLayout" label="填报日期">
              <a-input v-model="queryParam.fillInUnitDate" allowClear placeholder="" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-table :columns="columns" :data-source="[queryParam]" :rowKey="record => record.id" bordered size="middle">
          <template
            v-for="col in ['smallProjectNum', 'zeroProjectNum', 'allProject', 'persons','personTimes', 'projects', 'problems', 'handlings', 'rectificationRate']"
            :slot="col" slot-scope="text, record, index">
            <div :key="col">
              <a-input style="margin: -5px 0" v-model="queryParam[col]" :value="text"
                @change="e => handleChange(e.target.value, record.key, col)" />
            </div>
          </template>
        </a-table>
        <a-row :gutter="24">
          <a-col :lg="24" :md="24" :sm="24">
            <a-form-item :style="{ float: 'right' }">
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import SearchForm from './modules/searchformForList'
import { GetProjectStatisticsList, GetProjectStatisticsByID, ExportProjectStatistics } from '@/api/statistics'

import { tranDate } from '@/utils/util'
const userInfo = Vue.ls.get(ACCESS_TOKEN) // DepartmentID
let columnsData = [
  {
    title: '填报单位',
    dataIndex: 'fillInUnit',
    key: 'fillInUnit',
    align: 'center'
  },
  {
    title: '填报人',
    dataIndex: 'fillInUnitPerson',
    key: 'fillInUnitPerson',
    align: 'center'
  },
  {
    title: '联系电话',
    dataIndex: 'fillInUnitPhone',
    key: 'fillInUnitPhone',
    align: 'center'
  },
  {
    title: '填报日期',
    dataIndex: 'fillInUnitDate',
    key: 'fillInUnitDate',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    width: 130,
    align: 'center'
  }
]
export default {
  components: { SearchForm },
  props: {
    display: {
      type: String,
      required: false,
      default: 'default'
    }
  },
  created() {
    this.initData(this.queryParamBasic)
  },
  mounted() { },
  destroyed() { },
  data() {
    return {
      columnsData,
      action: 'add',
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      spinning: false,
      data: [],
      form: this.$form.createForm(this),
      queryParamBasic: {
        index: 1,
        pageSize: 10,
        departmentID: userInfo.DepartmentID,
        year: null,
        month: null
      },
      selectedRowKeys: [],
      pagination: {
        onChange: (index, pageSize) => {
          this.pageOnChange(index, pageSize)
        },
        current: 1,
        total: 0,
        showQuickJumper: true,
        size: 'small',
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '15', '20'],
        onShowSizeChange: (index, pageSize) => {
          this.pageOnChange(index, pageSize)
        },
        position: 'bottom'
      },
      visible: false,
      queryParam: {
        id: '',
        departmentID: '',
        year: '',
        month: '',
        fillInUnit: '',
        fillInUnitPerson: '',
        fillInUnitPhone: '',
        fillInUnitDate: '',
        smallProjectNum: '',
        zeroProjectNum: '',
        allProject: '',
        persons: '',
        projects: '',
        problems: '',
        handlings: '',
        rectificationRate: '',
        updateUserID: '',
        updateTime: '',
        isSubmit: ''
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 }
        }
      },
      columns: [
        {
          title: '监管情况',
          children: [
            {
              title: '已登记小型工程数（个）',
              dataIndex: 'smallProjectNum',
              key: 'smallProjectNum',
              width: 50,
              scopedSlots: { customRender: 'smallProjectNum' }
            },
            {
              title: '已登记零星作业数（个）',
              dataIndex: 'zeroProjectNum',
              key: 'zeroProjectNum',
              width: 50,
              scopedSlots: { customRender: 'zeroProjectNum' }
            },
            {
              title: '本地区小型零星工程合计（个）',
              dataIndex: 'allProject',
              key: 'allProject',
              width: 50,
              scopedSlots: { customRender: 'allProject' }
            }
          ]
        },
        {
          title: '开展巡查情况',
          children: [
            {
              title: '出动检查人员（人）',
              dataIndex: 'persons',
              key: 'persons',
              width: 50,
              scopedSlots: { customRender: 'persons' }
            },
            {
              title: '出动检查人次',
              dataIndex: 'personTimes',
              key: 'personTimes',
              width: 50,
              scopedSlots: { customRender: 'personTimes' }
            },
            {
              title: '检查工程数（个）',
              dataIndex: 'projects',
              key: 'projects',
              width: 50,
              scopedSlots: { customRender: 'projects' }
            },
            {
              title: '发现隐患总数（项）',
              dataIndex: 'problems',
              key: 'problems',
              width: 50,
              scopedSlots: { customRender: 'problems' }
            },
            {
              title: '已整改隐患总数（项）',
              dataIndex: 'handlings',
              key: 'handlings',
              width: 50,
              scopedSlots: { customRender: 'handlings' }
            },
            {
              title: '隐患整改率（%）',
              dataIndex: 'rectificationRate',
              key: 'rectificationRate',
              width: 50,
              scopedSlots: { customRender: 'rectificationRate' }
            }
          ]
        }
      ],
      thisYear: '',
      thisMonth: ''
    }
  },
  watch: {},
  computed: {},
  methods: {
    initData(data) {
      this.spinning = true
      GetProjectStatisticsList(data)
        .then(res => {
          this.data = res.data
          this.pagination.total = res.page.RecordCount
        })
        .finally(() => {
          this.spinning = false
        })
    },
    search(data) {
      Object.assign(this.queryParamBasic, data, { index: 1 })
      this.pagination.current = 1
      this.initData(this.queryParamBasic)
    },
    /**
     * 查看详情
     */
    handleView(data) {
      this.visible = true
      // const date = new Date()
      // const param = {
      //   departmentID: this.userInfo.DepartmentID,
      //   year: date.getFullYear(),
      //   month: date.getMonth() + 1
      // }
      GetProjectStatisticsByID({ id: data.id })
        .then(res => {
          this.queryParam = res.data
        })
        .finally(() => {
          this.spinning = false
        })
    },
    tranChooseData(data) {
      this.selectedRowKeys = data
    },
    setRowClassName(record, idx) {
      return idx % 2 == 1 ? 'bg-zebra-pattern' : ''
    },
    onSelectChange(selectedRowKeys) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    pageOnChange(index, pageSize) {
      this.spinning = true
      Object.assign(this.pagination, {
        current: index,
        pageSize,
        index
      })
      Object.assign(this.queryParamBasic, {
        pageSize,
        index
      })
      this.initData(this.queryParamBasic)
    },
    exportXls(data) {
      const param = {
        departmentID: data.departmentID,
        year: data.year,
        month: data.month
      }
      ExportProjectStatistics(param)
        .then(res => {
          const a = `${process.env.VUE_APP_API_BASE_URL}${res.data}`
          window.open(a)
        })
        .finally(() => {
          this.spinning = false
        })
    }
  }
}
</script>
<style lang="less" scoped>

</style>
